<template>
  <div class="warp">
    <div class="title">{{this.detail.title}}</div>
    <div class="desc">
      {{this.detail.subTitle}}
    </div>
    <div v-if=!existExpInfo class="exp-info">
      请设定小区扩展信息
    </div>
    <div class="alarm-item">
      <ul>
        <li v-for="(item, index) in this.detail.list" v-bind:key="`areaBaseInfoItem${index}`">
          <i :class="`icon iconfont ${iconClass[item.iconType]}`"></i>
          <span class="alarm-name">{{item.title}}</span>
          <span class="line"></span>
          <span class="alarm-num">{{ item.value }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'areaBaseInfo',
  props: ['info'],
  data () {
    return {
      detail: {},
      existExpInfo: true,
      /**
       * iconClass 分类描述
       * 0 === 'icon-team' === 常驻人口
       * 1 === 'icon-people' === 外来租户
       * 2 === 'icon-car' === 机动车
       * 3 === 'icon-bicycle' === 非机动车
       * 4 === 'icon-speed-dash' === 地磁
       * 5 === 'icon-delete' === 垃圾桶
       * 6 === 'icon-smog' === 井盖
       * 7 === 'icon-fire' === 烟感
       * 8 === 'icon-cloud' === 环境感知
       * 9 === 'icon-home' === 养老五件套
       * 10 === 'icon-mailbox' === 消防栓
       * 11 === 'icon-involve' === 智能门禁
       */
      iconClass: ['icon-team', 'icon-people', 'icon-car', 'icon-bicycle', 'icon-speed-dash', 'icon-delete', 'icon-smog', 'icon-fire', 'icon-cloud', 'icon-home', 'icon-mailbox', 'icon-involve']
    }
  },
  watch: {
    info (val) {
      this.detail = val
      const { list } = val
      if (list.length === 0) {
        this.existExpInfo = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .skin-white {
    .title {
      color: #4C6072 !important;
    }
    .alarm-name {
      color: #4C6072 !important;
    }
    .line {
      background-color: #4C6072 !important
    }
  }

  .warp {
    padding: 25px 0 0 30px;
    color: #fff;
  }

  .title {
    font-size: 22px;
  }

  .desc {
    margin-top: 10px;
    color: #9FACC3;
    font-size: 16px;
    font-weight: 600;
  }

  .exp-info {
    margin-top: 10px;
    color: #005e61;
    font-size: 14px;
    font-weight: 600;
  }

  .alarm-item {
    margin-top: 26px;
    ul li {
      line-height: 10px;
      padding-bottom: 24px;
    }
    i {
      color: #50E3C2;
    }
    .alarm-name {
      margin-left: 10px;
      display: inline-block;
      width: 70px;
    }
    .line {
      vertical-align: middle;
      display: inline-block;
      width: 90px;
      height: 1px;
      background-color: #fff;
      opacity: 0.1;
    }
    .alarm-num {
      margin-right: 22px;
      float: right;
      color: #50E3C2;
      font-size: 14px;
    }
  }
</style>
